<template>
    <div class="container">
        <el-card class="box-card" shadow="none">
            <div slot="header" class="clearfix">
                <el-page-header @back="goBack" :content="'返回首页'"></el-page-header>
            </div>
            <div class="itinerary_detail_content">
                <el-divider content-position="left">导游信息</el-divider>
                <br>
                <el-row :gutter="20">
                    <el-col :span="5" style="font-size:20px">
                        <i class="el-icon-user-solid"></i> <strong>导游证编号</strong>
                    </el-col>
                    <el-col :span="8" :offset="-13">
                        {{ username }}
                    </el-col>
                </el-row>
                <br>
                <el-row :gutter="20">
                    <el-col :span="3" style="font-size:20px">
                        <svg-icon :iconname="'icon-bianhao'"></svg-icon> <strong>用户ID </strong>
                    </el-col>
                    <el-col :span="8" :offset="-13">
                        {{ user }}
                    </el-col>
                </el-row>
                <br>
                <el-divider content-position="left">我申领的行程</el-divider>
                <br>
                <div class="my_app" v-if="data.id !== 0 && data.id !== ''">
                    <span class="name">{{ data.name }}</span>
                    <el-row :gutter="20" style="margin-top:30px">
                        <el-col :span="8">
                            <svg-icon :iconname="'icon-shijian'"></svg-icon> 出发时间：{{ data.start_time }}
                        </el-col>
                        <el-col :span="8">
                            <i class="el-icon-location-outline"></i> 集合点：{{ data.gathering_place }}
                        </el-col>
                        <el-col :span="4" :offset="4">
                            <span class="price">
                                价格 <svg-icon :iconname="'icon-jiage'" />{{ data.price }}
                            </span>
                        </el-col>
                    </el-row>
                    <br>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <svg-icon :iconname="'icon-qidian'"></svg-icon> 起点：{{ data.starting_point }}
                        </el-col>
                        <el-col :span="8">
                            <svg-icon :iconname="'icon-zhongdian'"></svg-icon> 终点：{{ data.destination }}
                        </el-col>
                        <el-col :span="8">
                        </el-col>
                    </el-row>
                    <br>
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <i class="el-icon-user"></i> 当前人数：{{ data.current_number }} / {{ data.maximum }}
                        </el-col>
                    </el-row>
                    <br>
                    <el-row :gutter="20">
                        <el-col :span="4">
                            <el-button type="primary" size="mini" @click="() => $router.push('/user/guide/member_list')"
                                plain>
                                查看团成员</el-button>
                        </el-col>
                    </el-row>

                </div>

                <!-- <div class="empty" v-else>
                    <h3>暂时没有行程单哦</h3>
                </div> -->
                <el-empty v-else description="还没有申领行程单哦"></el-empty>

                <br>

                <el-divider content-position="left">申领行程单</el-divider>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-button type="primary" plain size="mini" icon="el-icon-plus"
                            @click="() => $router.push('/user/guide/itinerary_list')">申领新的行程单</el-button>
                    </el-col>
                </el-row>
            </div>

        </el-card>

    </div>
</template>

<script>
import SvgIcon from '@/components/reusable_components/SvgIcon.vue';
export default {
    components: {
        SvgIcon,
    },

    data() {
        return {
            user: sessionStorage.user_id,
            update_password_visible: false,
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            username: '一寒止水',
            data: {
                id: 0,
                j_name: "",
                start_time: '',
                gathering_place: '',
                starting_point: '',
                destination: '',
                price: '',
                schedule: '',
                current_number: 20,
                g_name: '',
                agency: '',
                img: '',
                maximum: 0,
            },
        }
    },

    mounted() {
        this.get_guide_itinerary()
    },

    methods: {
        // 返回上一页
        goBack() {
            sessionStorage.index = 1
            this.$router.push('/user')
        },

        async get_guide_itinerary() {
            try {
                const res = await this.$http.post("/itinerary/findgitin", {
                    // 携带数据
                    id: sessionStorage.user_id
                });
                if (res.data.data.g_id + '' === sessionStorage.user_id) {
                    return
                }
                this.data = res.data.data
            } catch (error) { }
        },

        logout() { },
    }
}
</script>

<style lang="less" scoped>
.container {
    width: 61.8vw;
    min-width: 950px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);

    .itinerary_detail_content {
        height: 80vh;
        overflow: auto;

        -ms-overflow-style: none;
        /* IE 10+ */

        scrollbar-width: none;
        /* Firefox */

        .name {
            margin-top: 100px;
            font-size: 25px;
            font-weight: 500;
            margin-right: 20px
        }

        .after_name {
            font-size: 2px;

        }

        .price {
            text-align: center;
            font-size: 20px;
            color: rgb(250, 90, 77);
            // border-right: 2px dashed rgb(220, 223, 230);
        }

    }

    .itinerary_detail_content::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

}


.empty {
    width: 100%;
    // height: 100%;
    line-height: 80px;
    text-align: center;
}

.box-card {
    border: 0;
}
</style>